<template>
<div class="user">
    <div>
        <!-- 按钮 -->
        <div class="btns" style="float:left;display:flex">
            <!-- <i class="iconfont icon-nan"></i> -->
            <!-- 搜索框 -->
            <el-input v-model="inputName" placeholder="请输入用户名" style="width: 300px; margin-right: 10px"></el-input>
            <el-button type="primary" size="small" @click="searchHandler">搜索</el-button>
        </div>
        <div style="float:right;display:flex">
            <el-button type="primary" size="small" @click="toAdd">添加用户</el-button>
            <el-button type="primary" size="small" @click="toselect" style="margin-left: 30px">查询日志</el-button>
        </div>
    </div>
    <!-- /按钮 -->
    <!-- 内容 -->
    <el-table :data="users.list">
        <el-table-column label="序号" type="index" :index="1"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="realname"></el-table-column>
        <el-table-column label="性别" prop="gender">
            <template v-slot:default="scope">
                <span v-if="scope.row.gender == '男'">男</span>
                <span v-else-if="scope.row.gender == '女'">女</span>
                <!-- <i class="iconfont icon-nan" v-if="scope.row.gender == '男'"></i>
          <i class="iconfont icon-nv" v-else-if="scope.row.gender == '女'"></i> -->
                <!-- <el-button  type="primary" icon="el-icon-edit"  size="mini" @click="editUser(scope.row)"
            >修改</el-button
          >
          <el-button type="danger "  icon="el-icon-delete" size="mini" @click="delUser(scope.row)"
            >删除</el-button
          > -->
            </template>
        </el-table-column>
        <el-table-column label="手机号" prop="telephone"></el-table-column>
        <el-table-column label="出生日期" prop="birth">
            <template v-slot:default="scope">{{ scope.row.birth | date }}</template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
            <template v-slot:default="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editUser(scope.row)">修改</el-button>
                <el-button type="danger " icon="el-icon-delete" size="mini" @click="delUser(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- /内容 -->
    <!-- 分页 -->
    <el-pagination layout="prev, pager, next" @current-change="currentChangeHandler" :current-page="param.page" :page-size="param.pageSize" :total="users.total">
    </el-pagination>
    <!-- /分页 -->

    <!-- 日志模态框 -->
    <el-dialog title="用户" :visible.sync="vis2" width="70%" @close="closeDia()">
        <el-table :data="ulog.list">
            <el-table-column label="序号" prop="id"></el-table-column>
            <el-table-column label="用户编号" prop="userId"></el-table-column>
            <el-table-column label="用户昵称" prop="nickName"></el-table-column>
            <el-table-column label="IP地址" prop="ip"></el-table-column>
            <el-table-column label="操作" prop="type"></el-table-column>
            <el-table-column label="操作类型" prop="description"></el-table-column>
            <!-- <el-table-column label="参数" prop="params"></el-table-column> -->
            <el-table-column label="状态码" prop="code"></el-table-column>
            <el-table-column label="请求地址" prop="requestUrl"></el-table-column>
            <el-table-column label="操作时间" prop="time"></el-table-column>
            <el-table-column label="创建时间" prop="createdTime"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination layout="prev, pager, next" @current-change="currentChangeHandler2" :current-page="param2.page" :page-size="param2.pageSize" :total="100">
        </el-pagination>
        <!-- /分页 -->
    </el-dialog>
    <!-- /日志模态框 -->

    <!-- 模态框 -->
    <el-dialog title="用户" :visible.sync="visible" width="30%" @close="closeDia()">
        <el-form label-width="80px" size="small" style="margin-left: 100px">
            <el-form-item label="上传头像">
                <el-upload class="avatar-uploader" action="http://kianvoid.xyz:8001/file/upload2" :show-file-list="false" style="margin-bottom: 50px" :data="{ id: form.id }" :on-success="handleAvatarSuccess">

                    <img v-if="this.imageUrl" :src="this.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <!-- <img v-if="form.userFace" :src="form.userFace" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.username" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" type="password" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.realname" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" value-format="timestamp">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="手机" style="width: 60%">
                <el-input v-model="form.telephone"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="submit" size="small">确 定</el-button>
        </span>
        <!-- {{ this.form }} -->
    </el-dialog>
    <!-- /模态框 -->

    <!-- {{ count }} -->
    <!-- {{ users }} -->
    <!-- {{ ulog }} -->
</div>
</template>

<script>
// 1. 导入请求函数
import {
    mapState
} from "vuex";
import {
    get,
    post
} from "@/utils/request";
import moment from "moment";
export default {
    data() {
        return {
            inputName: "", //输入框的名字
            imageUrl: "",
            visible: false,
            vis2: false,
            param: {
                page: 1,
                pageSize: 10,
            },
            param2: {
                page: 1,
                pageSize: 10,
            },
            users: {},
            ulog: {},
            form: {
                gender: "女",
            },
        };
    },
    // 2.在vue实例创建完毕之后就调用加载用户信息的接口
    created() {
        this.loadUserData();
        this.loadLogData();
    },
    computed: {
        ...mapState({
            count: (state) => state.user, //使用ES6的箭头函数来给count赋值
        }),
    },
    methods: {
        // 模糊搜索用户
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.loadUserData();
        },
        // beforeAvatarUpload(file) {
        //   const isJPG = file.type === 'image/jpeg';
        //   const isLt2M = file.size / 1024 / 1024 < 2;

        //   if (!isJPG) {
        //     this.$message.error('上传头像图片只能是 JPG 格式!');
        //   }
        //   if (!isLt2M) {
        //     this.$message.error('上传头像图片大小不能超过 2MB!');
        //   }
        //   return isJPG && isLt2M;
        // },
        async searchHandler() {
            let params = {
                ...this.param,
                username: this.inputName
            }
            let data = await get('/baseUser/pageQuery', params)
            this.users = data.data;
            console.log(data);
        },
        // async searchHandler() {
        //   let params={...this.param2}
        //     let data = await get('/baseUser/pageQueryLog',params)
        //   this.ulog=data.data;
        //   console.log(data);
        // },
        closeDia() {
            // 将表单中的时间从时间戳转回来
            // this.form.birth= moment(this.form.birth).format("YYYY-MM-DD");
            // this.visible = false;
        },
        // 修改用户信息
        editUser(row) {
            // 将要修改的信息赋值给当前表单，进行双向数据绑定，再次基础上完成修改操作
            this.form = row;
            this.imageUrl = this.form.userFace;
            // this.form.birth = moment(this.form.birth).format("x");
            this.visible = true;
        },
        // 删除用户信息
        delUser(row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let url = "/baseUser/deleteById";
                get(url, {
                    id: row.id
                }).then((response) => {
                    this.$message({
                        type: "success",
                        message: response.message
                    });
                    this.loadUserData();
                    this.loadLogData();
                });
            });
        },
        // 提交表单
        submit() {
            // 1. 获取表单数据  this.form
            // 2. 交互
            let url = "/baseUser/saveOrUpdate";
            this.form.userFace = this.imageUrl;
            post(url, this.form).then((response) => {
                // 3. 提示
                this.$message({
                    type: "success",
                    message: response.message
                });
                // 4. 关闭模态框
                this.visible = false;
                // 5. 刷新数据
                this.loadUserData();
                this.loadLogData();
            });
        },
        // 加载用户信息
        loadUserData() {
            let url = "/baseUser/pageQuery";
            get(url, this.param).then((response) => {
                this.users = response.data;
                // moment(this.users.list[0].birth).format("YYYY-MM-DD")
                // 格式化生日
                // console.log(time);

                // let list = this.users.list.filter((item) => {
                //   item.birth = moment(item.birth).format("YYYY-MM-DD");
                //   return item;
                // });
            });
        },
        // 加载日志信息
        loadLogData() {
            let url = "/baseUser/pageQueryLog";
            get(url, this.param2).then((response) => {
                this.ulog = response.data;
            });
        },
        // 打开模态框去添加，
        toAdd() {
            this.form = {
                gender: "女"
            };
            this.visible = true;
        },
        //打开模态框查询日志
        toselect() {
            this.loadLogData();
            this.vis2 = true;
        },
        // 翻页
        currentChangeHandler(page) {
            this.param.page = page;
            this.loadUserData();
            this.loadLogData();
        },
        currentChangeHandler2(page) {
            this.param2.page = page;
            this.loadUserData();
            this.loadLogData();
        },
    },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff !important;
}

.avatar-uploader-icon {
    font-size: 28px !important;
    color: #8c939d !important;
    width: 178px !important;
    height: 178px !important;
    line-height: 178px !important;
    text-align: center !important;
}

.avatar {
    width: 178px !important;
    height: 178px !important;
    display: block !important;
}
</style>
